<script setup lang="ts">
import { ElButton, ElTable, ElTableColumn, ElText } from 'element-plus'
import { ContentWrap } from '@/components/ContentWrap'
import { useI18n } from '@/hooks/web/useI18n'
import { inject, reactive, ref } from 'vue'

defineOptions({
  name: 'Menu3'
})

let echarts = inject<any>('$echarts')
let axios = inject<any>('$axios')
// 设置表格是否可见变量
let tableVisible = ref(false)
let keyword = ref('联想')
let peppleKeyWord = ref('联想')
const peopleSearch = async () => {
  let word = peppleKeyWord.value
  await axios
    .get('http://localhost:8080/compkeylab/searcher/getSearcherInfo', {
      params: {
        seed_word: word
      }
    })
    .then((res) => {
      const da = res.data.data
      console.log(da)
      let [age, gender, education] = da
      console.log(age, gender, education)
      // 分别对年龄，性别，学历进行对 peopleForm 赋值

      // 将整数值映射到对应的标签的函数
      const mapValues = (value, mapping) => {
        return mapping[value] || '未知' // 如果在映射中找不到该值，则默认为'未知'
      }

      // 年龄、性别和教育的映射
      // const mapAge = {
      //   '0': '未知年龄',
      //   '1': '0-18岁',
      //   '2': '19-23岁',
      //   '3': '24-30岁',
      //   '4': '31-40岁',
      //   '5': '41-50岁',
      //   '6': '51-999岁'
      // }
      // const mapGender = { '0': '未知', '1': '男性', '2': '女性' }
      // const mapEducation = {
      //   '0': '未知学历',
      //   '1': '博士',
      //   '2': '硕士',
      //   '3': '大学生',
      //   '4': '高中',
      //   '5': '初中',
      //   '6': '小学'
      // }

      const ageMapping = {
        0: '未知年龄',
        1: '0-18岁',
        2: '19-23岁',
        3: '24-30岁',
        4: '31-40岁',
        5: '41-50岁',
        6: '51-999岁'
      }
      const genderMapping = { 0: '未知', 1: '男性', 2: '女性' }
      const educationMapping = {
        0: '未知学历',
        1: '博士',
        2: '硕士',
        3: '大学生',
        4: '高中',
        5: '初中',
        6: '小学'
      }

      // 将值赋给 peopleForm
      peopleForm.age = mapValues(age, ageMapping)
      peopleForm.gender = mapValues(gender, genderMapping)
      peopleForm.education = mapValues(education, educationMapping)

      // 现在，peopleForm 包含了相应的标签
      console.log(peopleForm)
    })
    .catch((err) => {
      console.log(err)
    })
}
const updataKeyList = async () => {
  let tableDataTemp = []
  console.log('开始更新')
  await axios
    .get('http://localhost:8080/compkeylab/comkey/getInterWordsBySeedword', {
      params: {
        seed_word: keyword.value
      }
    })
    .then((res) => {
      const da = res.data.data
      console.log(da)
      for (let i = 0; i < da.length; i++) {
        let item = {
          competitor: Object.keys(da[i])[0],
          searchNum: Object.values(da[i])[0]
        }
        console.log(item)
        // 添加 item 到 tableData
        tableDataTemp.push(item)
      }
    })
    .catch((err) => {
      console.log(err)
    })
  tableData.value = tableDataTemp
}

const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: ''
})

// 受众群体表单
// const peopleForm = reactive({
//   age: '19-23岁',
//   gender: '男性',
//   education: '大学生'
// })

const peopleForm = reactive({
  age: '',
  gender: '',
  education: ''
})

const formLabelWidth = '140px'

// let echartInit = () => {
//   let option = {
//     series: [
//       {
//         type: 'wordCloud',
//         shape: 'circle',
//         left: 'center',
//         top: 'center',
//         width: '70%',
//         height: '80%',
//         sizeRange: [12, 60],
//         rotationRange: [-90, 90],
//         rotationStep: 45,
//         gridSize: 8,
//         drawOutOfBound: false,
//         shrinkToFit: false,
//         layoutAnimation: true,
//         textStyle: {
//           fontFamily: 'sans-serif',
//           fontWeight: 'bold',
//           color: function () {
//             // Random color
//             return (
//               'rgb(' +
//               [
//                 Math.round(Math.random() * 160),
//                 Math.round(Math.random() * 160),
//                 Math.round(Math.random() * 160)
//               ].join(',') +
//               ')'
//             )
//           }
//         },
//         emphasis: {
//           focus: 'self',
//           textStyle: {
//             textShadowBlur: 10,
//             textShadowColor: '#333'
//           }
//         },
//
//         data: [
//           {
//             name: '华为',
//             value: 166
//           },
//           {
//             name: '小米',
//             value: 257
//           },
//           {
//             name: '苹果',
//             value: 207
//           },
//           { name: '三星', value: 268 },
//           { name: 'OPPO', value: 193 },
//           { name: '联想', value: 178 },
//           { name: '魅族', value: 215 },
//           { name: 'Vivo', value: 254 },
//           { name: '中兴', value: 168 },
//           { name: '一加', value: 291 },
//           { name: '索尼', value: 177 },
//           { name: '锤子', value: 189 },
//           { name: '诺基亚', value: 236 },
//           { name: 'LG', value: 265 },
//           { name: '谷歌', value: 158 },
//           { name: '微软', value: 172 },
//           { name: '杜比', value: 201 },
//           { name: '宏碁', value: 265 },
//           { name: '惠普', value: 184 },
//           { name: '戴尔', value: 203 },
//           { name: '华硕', value: 272 },
//           { name: '英特尔', value: 246 },
//           { name: 'AMD', value: 155 },
//           { name: '飞利浦', value: 223 },
//           { name: '夏普', value: 267 },
//           { name: '东芝', value: 188 },
//           { name: '夏新', value: 212 },
//           { name: '海尔', value: 153 },
//           { name: '美的', value: 194 },
//           { name: '格力', value: 166 },
//           { name: '科沃斯', value: 278 },
//           { name: '雀巢', value: 159 },
//           { name: '可口可乐', value: 287 }
//         ]
//       }
//     ]
//   }
//   let ch = document.getElementById('chart')
//   console.log(ch, 'ch')
//   var myChart = echarts.init(ch)
//   myChart.setOption(option)
// }

const { t } = useI18n()

const tableData = ref([
  {
    competitor: '华为',
    searchNum: '28064'
  },
  {
    competitor: '荣耀',
    searchNum: '5490'
  },
  {
    competitor: '手机',
    searchNum: '4698'
  },
  {
    competitor: 'p9',
    searchNum: '2599'
  },
  {
    competitor: 'mate8',
    searchNum: '1157'
  }
])
</script>

<template>
  <ContentWrap title="商品优化推荐">
    <div style="position: relative; height: 1500px; background: #f6f6f6">
      <!--      <div-->
      <!--        style="-->
      <!--          position: absolute;-->
      <!--          top: 5%;-->
      <!--          left: 20%;-->
      <!--          width: 55%;-->
      <!--          height: 120px;-->
      <!--          background: white;-->
      <!--          border-radius: 15px;-->
      <!--        "-->
      <!--      >-->
      <!--        <div-->
      <!--          class="flex items-center"-->
      <!--          style="position: absolute; top: 50%; left: 15%; width: 75%; height: 5%"-->
      <!--        >-->
      <!--          <ElInput-->
      <!--            v-model="keyword"-->
      <!--            tpye="textarea"-->
      <!--            style="width: 80%; height: 50px"-->
      <!--            clearable-->
      <!--            autosize-->
      <!--            placeholder="请输入关键字"-->
      <!--          />-->
      <!--          <ElButton style="width: 80px; height: 50px; margin-left: 30px" type="primary"-->
      <!--            >搜索-->
      <!--          </ElButton>-->
      <!--        </div>-->
      <!--      </div>-->
      <div
        style="
          position: absolute;
          top: 20%;
          left: 10%;
          width: 80%;
          height: 450px;
          background: white;
          border-radius: 15px;
        "
      >
        <ElText
          style="
            position: absolute;
            top: 5%;
            left: 42%;
            width: 90%;
            font-size: 24px;
            font-weight: bold;
          "
          >商品优化推荐
        </ElText>
        <el-input
          style="position: absolute; top: 5%; right: 16%; width: 200px"
          placeholder="请输入关键词"
          v-model="keyword"
        />
        <el-button
          style="position: absolute; top: 5%; right: 10%"
          type="primary"
          @click="updataKeyList()"
          >更新
        </el-button>

        <!--        关键词添加对话框（取消）-->
        <!--        <el-dialog v-model="tableVisible" title="">-->
        <!--          <el-form :model="form">-->
        <!--            <el-form-item label="关键词" :label-width="formLabelWidth">-->
        <!--              <el-input v-model="form.name" autocomplete="off" placeholder="请输入关键词" />-->
        <!--              <el-button style="padding-right: 10px" type="primary">搜索</el-button>-->
        <!--            </el-form-item>-->
        <!--            <el-form-item label="Zones" :label-width="formLabelWidth">-->
        <!--              <el-text>hello</el-text>-->
        <!--            </el-form-item>-->
        <!--          </el-form>-->
        <!--          <template #footer>-->
        <!--            <span class="dialog-footer">-->
        <!--              <el-button @click="tableVisible = false">取消</el-button>-->
        <!--              <el-button type="primary" @click="tableVisible = false"> 确定 </el-button>-->
        <!--            </span>-->
        <!--          </template>-->
        <!--        </el-dialog>-->

        <ElTable
          :data="tableData"
          border
          stripe
          style="width: 90%; margin: auto; margin-top: 80px; border-radius: 15px"
          height="320"
        >
          <ElTableColumn prop="competitor" label="关键词" width="180" style="margin: auto" />
          <ElTableColumn prop="searchNum" label="搜索量" width="200" />
        </ElTable>
      </div>
      <div
        style="
          position: absolute;
          top: 55%;
          left: 5%;
          width: 90%;
          height: 500px;
          background: white;
          border-radius: 15px;
        "
      >
        <!--        受众群体-->
        <el-form :model="peopleForm" label-width="120px">
          <el-form-item label="关键词">
            <el-input style="width: 200px" v-model="peppleKeyWord" placeholder="请输入关键词" />
            <el-button type="primary" @click="peopleSearch()">搜索</el-button>
          </el-form-item>
          <el-form-item label="受众年龄">
            <!-- Age -->
            <el-radio-group v-model="peopleForm.age">
              <!--              <el-radio label="未知年龄" />-->
              <el-radio label="0-18岁" />
              <el-radio label="19-23岁" />
              <el-radio label="24-30岁" />
              <el-radio label="31-40岁" />
              <el-radio label="41-50岁" />
              <el-radio label="51-999岁" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="受众性别">
            <!-- Gender -->
            <el-radio-group v-model="peopleForm.gender">
              <!--              <el-radio label="未知" />-->
              <el-radio label="男性" />
              <el-radio label="女性" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="受众学历">
            <!-- Education -->
            <el-radio-group v-model="peopleForm.education">
              <!--              <el-radio label="未知学历" />-->
              <el-radio label="博士" />
              <el-radio label="硕士" />
              <el-radio label="大学生" />
              <el-radio label="高中" />
              <el-radio label="初中" />
              <el-radio label="小学" />
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </ContentWrap>
</template>

<style>
.el-button--text {
  margin-right: 15px;
}

.el-select {
  width: 300px;
}

.el-input {
  width: 300px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
